<template>
  <div class="dd1">
    <div
      class="con"
      @click="linkDetails"
      v-for="(item, index) in RrivateRoomData"
      :key="index"
    >
      <span class="btn">{{ item.haveroom }}</span>
      <span class="bt">{{ item.title }}</span>
      <div class="img">
        <img
          v-for="(v, i) in item.roomimg"
          :key="i"
          class="img1"
          :src="v"
          alt=""
        />
      </div>
      <div class="d1">
        <div class="d2">
          <!-- <img src="../assets/img/3.jpg" alt="" /> -->
          <div class="s1">{{ item.collect }}</div>
        </div>
        <div class="s2">{{ item.updatetime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    linkDetails() {
      this.$router.push({ name: "privateDetails" });
    },
  },
  data() {
    return {
      RrivateRoomData: [
        {
          haveroom: "有房",
          title: "天星桥自己的房子出租，没有中间商赚差价",
          roomimg: [
            require("../assets/img/roomshow/roomshow2.jpg"),
            require("../assets/img/roomshow/roomshow1.jpg"),
            require("../assets/img/roomshow/roomshow3.jpg"),
          ],
          collect: "2人收藏",
          updatetime: "2小时前更新",
        },
        {
          haveroom: "有房",
          title: "三室两厅整租，非诚勿扰",
          roomimg: [
            require("../assets/img/roomshow/show2.jpg"),
            require("../assets/img/roomshow/show1.jpg"),
            require("../assets/img/roomshow/show3.jpg"),
          ],
          collect: "33人收藏",
          updatetime: "6小时前更新",
        },
          {
          haveroom: "有房",
          title: "三室两厅整租，非诚勿扰",
          roomimg: [
            require("../assets/img/roomshow/show4.jpg"),
            require("../assets/img/roomshow/show5.jpg"),
            require("../assets/img/roomshow/show6.jpg"),
          ],
          collect: "33人收藏",
          updatetime: "6小时前更新",
        },
          {
          haveroom: "有房",
          title: "三室两厅整租，非诚勿扰",
          roomimg: [
            require("../assets/img/roomshow/show7.jpg"),
            require("../assets/img/roomshow/show8.jpg"),
            require("../assets/img/roomshow/show1.jpg"),
          ],
          collect: "33人收藏",
          updatetime: "6小时前更新",
        },
      ],
    };
  },
};
</script>
<style>
.dd1 .con {
  width: 355px;
  height: 200px;
  border-bottom: 0;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
}
.dd1 .con .btn {
  width: 50px;
  height: 25px;
  font-size: 10px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 25px;
  background-color: #007d65;
  float: left;
  display: block;
  margin-top: 3px;
}
.dd1 .con .d1 {
  display: flex;
}
.dd1 .con .d2 {
  display: flex;
  width: 82px;
  /* background: url("../assets/imgs/性别女.png") no-repeat right; */
}
.dd1 .con .d1 img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-top: 3px;
}
.dd1 .con .d1 .s1 {
  line-height: 31px;
  margin-left: 10px;
  margin-top: 0px;
  color: #007d65;
}
.dd1 .con .d1 .s2 {
  line-height: 31px;
  font-size: 15px;
  position: absolute;
  right: 13px;
}
.dd1 .con .bt {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  display: block;
  margin-top: 10px;
  margin-left: 57px;
  display: block;
  width: 300px;
}
.dd1 .con .img {
  text-align: center;
  margin: 10px 0;
}
.dd1 .con .img img {
  width: 100px;
  height: 80px;
  border-radius: 10px;
}
.dd1 .con .img .img1 {
  margin: 0 7px;
}
</style>